<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            </f:facet>
        </h:head>

        <h:body>

            <p:layout fullPage="true">
                <p:layoutUnit position="north" size="30" resizable="true" closable="true" collapsible="true">
                </p:layoutUnit>

                <p:layoutUnit position="west" size="175" header="MENU" collapsible="true">
                    <h:form>
                        <p:menu>
                            <p:menuitem value="Clientes" url="" />
                            <p:menuitem value="Consiganciones" url="" />
                            <p:menuitem value="Cuentas" url="" />
                            <p:menuitem value="Retiros" url="" />
                            <p:menuitem value="Usuarios" url="" />
                        </p:menu>
                    </h:form>
                </p:layoutUnit>

                <p:layoutUnit position="center">


                    <h1>Retiros</h1>
                    <h:form id="forma">
                        <p:growl id="growl" showDetail="true" sticky="true"/>
                        <p:messages id="mensajes" showDetail="true"/>
                        <p:panel id="grafica">

                            <p:lineChart value="#{retirosVista.lineModel1}" style="height:300px;" widgetVar="chart"/>

                            <p:commandButton  value="Exportar" icon="ui-icon-extlink" onclick="exportChart()"/>

                            <p:dialog widgetVar="dlg" showEffect="fade" modal="true" header="Retiros" resizable="false">
                                <p:outputPanel id="output" layout="block" style="width:500px;height:300px"/>
                            </p:dialog>

                            <script type="text/javascript">
                                function exportChart() {
                                    //export image
                                    $('#output').empty().append(PF('chart').exportAsImage());

                                    //show the dialog
                                    PF('dlg').show();
                                }
                            </script>

                        </p:panel>
                    </h:form>

                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>

